<template>
	<view >
		<view class="navbar" :style="{'background':background, 'height':navbarHeight + 'px'}">
			  <view :style="{'height':capsuleHeight + 'px', 'top': capsuleTop + 'px' }" class="arrow-content">
			    <view class="arrow" v-if="isShowArrow" @click="handleGoToBack"></view>
				 <view class="home" v-if="ishome" @click="gotoadmin">
					<u-icon name="home-fill" size="38"></u-icon>
				 </view>
			  </view>
			  <view class="text" :style="{ 'height': capsuleHeight + 'px', 'top': capsuleTop + 'px' }">{{title}}</view>
			</view>
			<view :style="{marginTop:navbarHeight+'px'}">
				<slot></slot>
			</view>
	</view>
</template>

<script setup>
	const capsuleTop=ref(0)//胶囊距离屏幕顶部的距离
	const capsuleHeight=ref(0)//胶囊高度
	const navbarHeight=ref(0)//导航栏高度
	const props=defineProps({
		title:{
			type:String,
			default:" ",
		},
		   background:{
		      type: String,
		      default: '#71C592',
		    },
			isShowArrow:{
			   type: Boolean,
			    default: false,
			    },
				ishome:{
					type: Boolean,
					 default: false,
				}
	})
	// #ifdef MP-WEIXIN
	onLoad(()=>{
		 const App = getApp()
		   	capsuleTop.value = App.globalData.capsule.top, 
		  capsuleHeight.value = App.globalData.capsule.height, 
		  navbarHeight.value = (App.globalData.capsule.top - App.globalData.system.statusBarHeight) * 2 + App.globalData.capsule.height + App.globalData.system.statusBarHeight
	})	
// #endif
</script>

<style lang="scss" scoped>
	.navbar{
	  width: 100%;
	  //设置导航栏固定在顶部
	  position: fixed;
	  top: 0;
	  z-index: 99;
	
	}
	.arrow-content{
	  position: absolute;
	  left: 40rpx;
	  z-index: 999;
	  display: flex;
	  align-items: center;
	}
	.arrow{
	  width: 20rpx;
	  height: 20rpx;
	  border: 5rpx solid #FFFFFF;
	  border-right-color:transparent;
	  border-bottom-color:transparent;
	  transform: rotate(-45deg);
	}
	.text{
	  position: absolute;
	  left: 0;
	  right: 0;
	  font-size: 28rpx;
	  color: #FFFFFF;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
</style>